<template>
  <div class="table-page-search-wrapper" style="margin-top: 20px;">
    <a-form layout="inline" @keyup.enter.native="search">
      <a-row :gutter="48">
        <template v-if="type == 3">
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="话题ID">
              <a-input v-model="queryParam.id" placeholder="话题ID搜索" allowClear />
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="话题名称">
              <a-input v-model="queryParam.topicName" placeholder="话题名称搜索" allowClear />
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="话题类型">
              <a-select v-model="queryParam.topicType" placeholder="请选择" show-search :filter-option="filterOption">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="0">普通话题</a-select-option>
                <a-select-option value="1">有奖话题</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="发布时间" has-feedback>
              <a-range-picker style="width:100%;" show-time valueFormat="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss" v-model="queryParam.time" />
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
           <a-form-item label="排序方式">
               <a-select v-model="queryParam.sort" placeholder="请选择" show-search :filter-option="filterOption">
                <a-select-option value="">创建时间从近到远</a-select-option>
                <a-select-option value="peopleNumberSort">参与人数从大到小</a-select-option>
                <a-select-option value="browseNumberSort">阅读人数从大到小</a-select-option>
                <a-select-option value="commentsNumberSort">讨论人数从大到小</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="适用小程序">
              <a-select v-model="queryParam.topicProgram" placeholder="请选择" show-search :filter-option="filterOption">
                <a-select-option value="">全部</a-select-option>
                <a-select-option :value="item.name+'微商城'" v-for="(item, index) in brandList" :key="index">
                  {{ item.name }}微商城
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </template>
        <template v-if="type == 1 || type == 2 || type == 4">
          <a-col v-if="type == 1 || type == 4" :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="内容ID">
              <a-input v-model="queryParam.id" placeholder="内容ID搜索" allowClear />
            </a-form-item>
          </a-col>
          <a-col v-if="type == 2" :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="内容ID">
              <a-input v-model="queryParam.contentId" placeholder="内容ID搜索" allowClear />
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="内容文案">
              <a-input v-model="queryParam.bodyContent" placeholder="内容文案搜索" allowClear />
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="关联商品款号">
              <a-input v-model="queryParam.productNo" placeholder="款号搜索" allowClear />
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="关联话题">
              <a-input v-model="queryParam.topicName" placeholder="话题搜索" allowClear />
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="发布人">
              <a-input v-model="queryParam.userNickname" placeholder="社区昵称/手机号/社区ID搜索" allowClear />
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="发布时间" has-feedback>
              <a-range-picker style="width:100%;" show-time valueFormat="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss" v-model="queryParam.releaseTime" />
            </a-form-item>
          </a-col>
          <template v-if="type == 2">
            <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
              <a-form-item label="审核时间" has-feedback>
                <a-range-picker style="width:100%;" show-time valueFormat="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss" v-model="queryParam.auditTime" />
              </a-form-item>
            </a-col>
            <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
              <a-form-item label="审核结果">
                <!-- 0通过  1不通过  2机审通过  3机审不通过 -->
                <a-select v-model="queryParam.status" placeholder="请选择" show-search :filter-option="filterOption">
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option value="0">通过</a-select-option>
                  <a-select-option value="1">不通过</a-select-option>
                  <a-select-option value="2">机审通过</a-select-option>
                  <a-select-option value="3">机审不通过</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </template>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="发布人身份">
              <a-select v-model="queryParam.identityId" placeholder="请选择" show-search :filter-option="filterOption">
                <a-select-option value="">全部</a-select-option>
                <a-select-option :value="item.id +''" v-for="item in identityList" :key="item.id">
                  {{ item.identityName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col v-if="(type == 1 && (activeKey == 1 || activeKey == 0)) || type == 4" :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="排序方式">
               <a-select v-model="queryParam.sort" placeholder="请选择" show-search :filter-option="filterOption">
                <a-select-option value="release">发布时间从近到远</a-select-option>
                <a-select-option value="browseNumberSort">浏览量从大到小</a-select-option>
                <a-select-option value="playNumberSort">播放量从大到小</a-select-option>
                <a-select-option value="praiseNumberSort">获赞数从大到小</a-select-option>
                <a-select-option value="commentsNumberSort">评论数从大到小</a-select-option>
                <a-select-option value="turnNumberSort">转发数从大到小</a-select-option>
                <a-select-option value="noLikeNumberSort">不喜欢数从大到小</a-select-option>
              </a-select>
              
            </a-form-item>
          </a-col>
          <a-col v-if="type == 1 && (activeKey == 1 || activeKey == 0)" :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="内容级别">
             <a-select v-model="queryParam.contentLevel" placeholder="请选择" show-search :filter-option="filterOption">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="A">A级</a-select-option>
                <a-select-option value="B">B级</a-select-option>
                <a-select-option value="C">C级</a-select-option>
                <a-select-option value="D">D级</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </template>
        <template v-if="type == 5">
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="内容ID">
              <a-input v-model="queryParam.contentId" placeholder="内容ID搜索" allowClear />
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="评论人">
              <a-input v-model="queryParam.keyWord" placeholder="社区昵称/手机号/社区ID搜索" allowClear />
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="评论内容">
              <a-input v-model="queryParam.content" placeholder="评论内容搜索" allowClear />
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="来源小程序">
              <a-select v-model="queryParam.source" placeholder="请选择" show-search :filter-option="filterOption">
                <a-select-option :value="item.weid" v-for="(item, index) in brandList" :key="index">
                  {{ item.name }}微商城
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="评论时间" has-feedback>
              <a-range-picker style="width:100%;" show-time valueFormat="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss" v-model="queryParam.time" />
            </a-form-item>
          </a-col>
          <a-col v-if="activeKey == 3 || activeKey == 0" :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="审核时间" has-feedback>
              <a-range-picker style="width:100%;" show-time valueFormat="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss" v-model="queryParam.auditTime" />
            </a-form-item>
          </a-col>
          <a-col v-if="activeKey == 1" :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="禁用时间" has-feedback>
              <a-range-picker style="width:100%;" show-time valueFormat="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss" v-model="queryParam.auditTime" />
            </a-form-item>
          </a-col>
        </template>
        <template v-if="type == 6">
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="举报人">
              <a-input v-model="queryParam.keyWord" placeholder="社区昵称/手机号/社区ID搜索" allowClear />
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="举报时间" has-feedback>
              <a-range-picker style="width:100%;" show-time valueFormat="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss" v-model="queryParam.time" />
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="内容文案">
              <a-input v-model="queryParam.bodyContent" placeholder="内容文案搜索" allowClear />
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24">
            <a-form-item label="举报原因">
              <a-select v-model="queryParam.informType" placeholder="请选择" show-search :filter-option="filterOption">
                <a-select-option value="">全部</a-select-option>
                <a-select-option :value="item.whyName" v-for="item in whyList" :key="item.id">
                  {{ item.whyName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xxl="8" :xl="8" :lg="8" :sm="24" v-if="activeKey == 1">
            <a-form-item label="处理结果">
              <a-select v-model="queryParam.processResult" placeholder="请选择" show-search :filter-option="filterOption">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="0">忽略举报</a-select-option>
                <a-select-option value="1">内容已禁用</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </template>
        <a-col :xxl="8" :xl="8" :lg="8" :sm="24" v-if="type == 1">
          <a-form-item label="是否置顶">
            <a-select v-model="queryParam.isTop" placeholder="请选择" show-search :filter-option="filterOption">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="1">是</a-select-option>
              <a-select-option value="0">否</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        
        <a-col :xxl="24" :xl="24" :lg="24" :sm="24">
          <span class="table-page-search-submitButtons">
            <a-button type="primary" @click="search" >查询</a-button>
            <a-button style="margin-left: 8px" @click="reset">重置</a-button>
            <a-button type="primary" v-if="type == 3" style="margin-left: 8px" @click="handleReleaseTopic">发布话题</a-button>
            <a-button  v-if="type == 4" style="margin-left: 8px" @click="handleContentExport">导出</a-button>
            <!-- <a-select v-if="type == 1" style="width: 130px;margin-left: 8px" placeholder="发布官方内容" @change="handleChange">
              <a-select-option value="1">自行添加</a-select-option>
              <a-select-option value="2">素材库选择</a-select-option>
            </a-select> -->
            <template v-if="type == 1">
              <a-button type="primary" style="margin-left: 8px" @click="addOrEditOfficialContent">自行添加</a-button>
              <a-button type="primary" style="margin-left: 8px" @click="materialList">素材库选择</a-button>
            </template>
          </span>
        </a-col>
      </a-row>
    </a-form>

    <a-modal :title="type == 3 ? '话题推广' : '内容推广'" :visible="currentExtensionVisible" width="600px" :footer="null" @cancel="currentExtensionVisible = false, weid='',img=''">
      <a-form-item :label="type == 3 ? '话题页小程序路径' : '内容小程序路径'">
        {{url}}
      </a-form-item>
      <a-form-item v-if="type == 3" label="话题页小程序码">
        生成话题页小程序码需要选择话题适用小程序生成，扫码后将使用对应小程序打开话题详情页
      </a-form-item>
      <a-form-item v-else label="内容小程序码">
        生成内容小程序码需要选择小程序生成，扫码后将使用对应小程序打开内容详情页
      </a-form-item>
      <a-form-item>
        <a-select v-model="weid" style="width: 400px;" placeholder="选择小程序生成推广码" show-search :filter-option="filterOption">
          <a-select-option value="" disabled>选择小程序生成推广码</a-select-option>
          <a-select-option :value="item.weid" v-for="item in extensionBrandList" :key="item.weid">
            {{ item.name }}
          </a-select-option>
        </a-select>
        <a-button type="primary" style="margin-left: 10px;" @click="handleContentPromote">生成</a-button>
      </a-form-item>
      <img v-if="img" :src="img" alt="太阳码" style="width: 200px;height: 200px;">
      <div v-else style="width: 200px;height: 200px;"></div>
    </a-modal>
  </div>
</template>
<script>
import { contentPromote } from '@/api/micromall/communityContent'
import { identityList, whyPage } from '@/api/micromall/communityUser'
import { brandList } from '../components/brandList.js'

export default {
  props: {
    extensionBrandList: {
      type: Array,
      default: () => brandList
    },
    isMaterialTools: {
      type: Boolean,
      default: false
    },
    extensionVisible: {
      type: Boolean,
      default: false
    },
    type: {
      // 1:内容列表 2: 内容审核记录 3:话题列表 4：话题内容 5:评论管理 6:举报管理
      type: [String, Number],
      default: 1
    },
    activeKey: {
      // 5:评论管理-1:已启用2:待审核3:已禁用4:审核不通过 6:举报管理-2:已处理 内容列表 2待审核 3已禁用
      type: [String, Number],
      default: 1
    },
    url: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      brandList,
      weid: '',
      img: '',
      identityList: [],
      whyList: [],
      queryParam: {
        informType: '',
        processResult: '',
        contentLevel: '',
        identityId: '',
        processResult: '',
        topicType: '',
        topicProgram: '',
        isTop: ''
      }
    }
  },
  computed: {
    currentExtensionVisible: {
      get() {
        return this.extensionVisible
      },
      set(val) {
        this.$emit('update:extensionVisible', val)
      }
    }
  },
  created() {
    this.getIdentityList()
    this.getWhyPage()
  },
  mounted() {
  },
  methods: {
    // 获取推广码
    handleContentPromote() {
      if (!this.weid) {
        this.$message.error('请选择小程序！')
        return
      }
      const data = {
        url: this.url,
        weid: this.weid
      }
      contentPromote(data).then(res => {
        if (res.code === 200) {
          this.img = res.data
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
    },

    // 话题内容导出
    handleContentExport() {
      this.$emit('onContentExport')
    },

    // 获取身份标识
    getIdentityList() {
      if (this.type != 1 && this.type != 2 && this.type != 4) return
      identityList({}).then(res => {
        if (res.code === 200) {
          this.identityList = res.data
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
    },

    // 举报原因
    getWhyPage() {
      if (this.type != 6) return
      const data = {
        type: 1,
        status: 0
      }
      whyPage(data).then(res => {
        if (res.code === 200) {
          this.whyList = res.data.records
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
    },

    handleReleaseTopic() {
      this.$router.push(`/micromall/community/contentManagement/addOrEditOfficialTopic/null`)
    },

    // 自行添加
    addOrEditOfficialContent() {
      this.$router.push(`/micromall/community/contentManagement/addOrEditOfficialContent/null`)
    },

    // 素材库选择
    materialList() {
      this.$router.push(`/micromall/community/contentManagement/materialList`)
    },
    // handleChange(value) {
    //   if (value == 1) {
    //     this.$router.push(`/micromall/community/contentManagement/addOrEditOfficialContent/1`)
    //   } else {
    //     this.$router.push(`/micromall/community/contentManagement/materialList`)
    //   }
    // },

    // 素材库选择素材
    brandMaterial() {
      this.$emit('brandMaterial')
    },

    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },

    search() {
      let queryParam = (this.type == 1 || this.type == 4 || this.type == 3) && this.queryParam.sort ? this.filterFields({...this.queryParam, [this.queryParam.sort]: '0'}) : this.filterFields(this.queryParam)
      this.$emit('onSearch', queryParam)
    },

    reset() {
      this.queryParam = {
        informType: '',
        processResult: '',
        contentLevel: '',
        identityId: '',
        processResult: ''
      }
      let queryParam = this.filterFields(this.queryParam)
      this.$emit('onSearch', queryParam)
    },

    filterFields(values) {
      const formValue = {}
      Object.keys(values).forEach(i => {
        if (values[i] && values[i].length) {
          if (i === 'time') {
            formValue.startTime = values[i][0]
            formValue.endTime = values[i][1]
          } else if (i === 'auditTime') {
            formValue.auditStartTime = values[i][0]
            formValue.auditEndTime = values[i][1]
          } else if(i === 'releaseTime'){
            formValue.releaseStartTime = values[i][0]
            formValue.releaseEndTime = values[i][1]
          } else {
            formValue[i] = values[i]
          }
        }
      })
      return formValue
    }
  }
}
</script>
<style lang="less" scoped>
.table-page-search-submitButtons {
  display: flex;
  justify-content: flex-end;
}
.product {
  display: flex;
  align-items: center;
  overflow: hidden;
  .img {
    display: block;
    margin: 0 2px;
    width: 60px;
    height: 60px;
    border: 1px dashed #f5f5f5;
    object-fit: scale-down;
    cursor: pointer;
  }
  .product-name {
    flex: 1;
    margin-left: 5px;
    width: 80px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    word-break: break-all; /* 追加这一行代码 */
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
  }
}
</style>
<style scoped>
/* For demo */
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
</style>
